<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

const router = useRouter();
// 跳转页面
const jumpTo = (path) => {
  router.push(path);
};

const activeTab = ref(1);

const setTab = (tab) => {
  activeTab.value = tab;
  getCouponList();
};

const coupons = ref([]);
const getCouponList = async () => {
  let url = "";
  if (activeTab.value === 1 || activeTab.value === 2) {
    url = `${apiUrl}/coupons/user/${activeTab.value}?page=1&limit=30`;
  } else {
    url = `${apiUrl}/v2/coupons?type=0&page=1&limit=20`;
  }
  try {
    const res = await axios.get(url, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      if (activeTab.value === 1 || activeTab.value === 2) {
        coupons.value = res.data.data;
      } else {
        coupons.value = res.data.data.list;
      }
    }
  } catch (e) {}
};

const receiveCoupon = async (id) => {
  try {
    const res = await axios.post(
      `${apiUrl}/coupon/receive`,
      { couponId: id },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );

    if (res.data.status === 200) {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
    } else {
      ElMessage({
        message: res.data.msg,
        type: "warning",
      });
    }
  } catch (e) {}
};

onMounted(() => {
  getCouponList();
});
</script>

<template>
  <div class="couponContainer">
    <!-- 顶部选项卡 -->
    <div class="tabMenu">
      <div class="item" :class="{ tabActive: activeTab === 1 }" @click="setTab(1)">
        {{ $t("account.couponsStatus1") }}
      </div>
      <div class="item" :class="{ tabActive: activeTab === 2 }" @click="setTab(2)">
        {{ $t("account.couponsStatus2") }}
      </div>
      <div class="item" :class="{ tabActive: activeTab === 3 }" @click="setTab(3)">
        {{ $t("account.couponsStatus3") }}
      </div>
    </div>

    <!-- 优惠券内容 -->
    <div class="couponList">
      <el-row :gutter="20">
        <el-col :span="8" v-for="coupon in coupons" :key="coupon.id">
          <div class="box">
            <div class="couponCard">
              <div class="couponLeft">
                <div class="couponType">{{ $t("account.commonCounp") }}</div>
                <div class="couponAmount">
                  <div class="unit">￥</div>
                  <div class="price">{{ coupon.coupon_price }}</div>
                </div>
              </div>
              <div class="couponRight">
                <p class="couponTitle">{{ coupon.coupon_title }}</p>
                <p class="couponLimit">
                  {{ $t("account.counman") }}{{ coupon.use_min_price
                  }}{{ $t("account.counuse") }}
                </p>
              </div>
              <div
                class="couponAction"
                @click="
                  activeTab === 1 || activeTab === 2
                    ? jumpTo('/productList')
                    : receiveCoupon(coupon.id)
                "
              >
                {{
                  activeTab === 1 || activeTab === 2
                    ? $t("account.toUse")
                    : $t("account.toGet")
                }}
              </div>
            </div>
            <div class="couponDate">
              {{ $t("account.counpDate") }}{{ coupon.end_time }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped lang="scss">
.couponContainer {
  width: 900px;
  min-height: calc(100vh - 551px);
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.tabMenu {
  display: flex;
  justify-content: start;
  gap: 20px;
  margin-bottom: 20px;

  .item {
    padding: 7px 18px;
    cursor: pointer;
    background-color: #f5f5f5;
    font-size: 14px;
  }

  .tabActive {
    background-color: #000;
    color: #fff;
    font-weight: bold;
  }
}

.couponList {
}

.box {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.couponCard {
  display: flex;
  width: 290px;
  position: relative;
}

.couponLeft {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.couponAmount {
  color: #333;
  margin-top: 10px;
  display: flex;

  .unit {
    position: relative;
    top: 6px;
    color: #666;
  }

  .price {
    font-size: 26px;
    font-weight: bold;
  }
}

.couponType {
  font-size: 14px;
  margin-top: 5px;
  color: #555;
  background-color: rgb(246, 246, 246);
  padding: 3px 0;
  width: 60px;
  text-align: center;
}

.couponRight {
  padding: 25px 15px 10px 15px;
  flex-grow: 1;
}

.couponTitle {
  font-weight: bold;
  margin-bottom: 5px;
}

.couponLimit {
  font-size: 12px;
  color: #777;
}

.couponDate {
  font-size: 12px;
  color: #777;
  padding: 5px 15px;
  margin-bottom: 5px;
}

.couponAction {
  position: absolute;
  right: 0;
  top: -1px;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  height: 110px;
  padding: 0 10px;
  writing-mode: vertical-rl;
  text-align: center;
  border-radius: 0;
  cursor: pointer;
}
</style>
